﻿@using Microsoft.AspNetCore.Components.Routing

<strong>Note all features implemented here are currently supported. See https://github.com/dotnet/aspnetcore/issues/18271 and SvgTest for more info.</strong>

<h3>SVG with Callback</h3>
<svg height="250" width="250" id="svg-with-callback">
    <circle cx="125" cy="125" r=@radius fill="red" stroke="black" stroke-width="3" />
</svg>

<button @onclick=@(() => { radius *= 2; })>Click me</button>

<h3>SVG with Child Component</h3>
<svg height="250" width="250" id="svg-with-child-component">
    <SvgCircleComponent />
</svg>

<h3>SVG with Foreign Object</h3>
<svg width="100" height="100" id="svg-with-foreign-object">
    <foreignObject x="0" y="0" width="100" height="100">
        <strong>thestringfoo</strong>
        <strong>@bar</strong>
    </foreignObject>
</svg>

<h3>SVG with link</h3>
<svg id="svg-with-link">
    <NavLink href="counter" id="navlink-in-svg">
        <circle cx="100" cy="100" r="10"></circle>
    </NavLink>
</svg>

<h3>SVG with input element and two-way binding</h3>
<svg id="svg-with-two-way-binding">
    <foreignobject style="overflow:visible">
        <input @bind="value" @bind:event="oninput" type="number"/> SVG Two way bind
    </foreignobject>
</svg>
<p id="svg-with-two-way-binding-value">@value</p>


<h3>SVG with render fragment</h3>
<svg id="svg-with-render-fragment">
    <foreignObject width="100" height="100">
        <div xmlns="http://www.w3.org/1999/xhtml">
            <div>
                @rf
            </div>
        </div>
    </foreignObject>
</svg>

<h3>SVG with scoped CSS</h3>
<svg id="svg-with-css-scope">
    <circle cx="125" cy="125" r=@radius stroke-width="3" />
</svg>

@code {
    int radius = 10;
    string bar = "thestringbar";

    int value = 10;

    RenderFragment rf = @<text><i>Hello</i></text>;

}
